<template>
  <div class="warehouseadd">
    <div class="left">
      <el-form :model="warehouseFrom" :rules="rules" ref="warehouseFrom" @click.stop>
        <el-form-item label="城市:" :label-width="formLabelWidth" prop="cityId">
          <el-select
            v-model="warehouseFrom.cityId"
            size="small"
            style="width: 180px;"
            placeholder="请选择城市"
            @change="getcityIdslist"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              size="small"
              :label="item.deptName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库名称:" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model.trim="warehouseFrom.name"
            size="small"
            autocomplete="off"
            style="width: 180px;"
            onafterpaste="value=value.replace(/^[\u0391-\uFFE5A-Za-z]+$/,'').slice(0,20)"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库类型:" :label-width="formLabelWidth" prop="type">
          <el-select
            v-model="warehouseFrom.type"
            size="small"
            style="width: 180px;"
            placeholder="请选择仓库类型"
            @visible-change="getwarehousetype"
            @change="getwarehousetypeId"
          >
            <el-option
              v-for="item in warehousetypeList"
              :key="item.id"
              size="small"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域:" :label-width="formLabelWidth" prop="deptId">
          <el-select
            v-model="warehouseFrom.deptId"
            size="small"
            style="width: 180px;"
            placeholder="请选择区域"
            @visible-change="getareadataList"
          >
            <el-option
              v-for="item in areadataList"
              :key="item.id"
              size="small"
              :label="item.deptName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="中央厨房:" :label-width="formLabelWidth" >
          <el-select
            v-model="warehouseFrom.kitchenName"
            size="small"
            style="width: 180px;"
            placeholder="请选择中央厨房"
            @change="changeNewPrice($event, 'kitchenName')"
            clearable
          >
            <el-option
              v-for="item in centralKitchen"
              :key="item.id"
              size="small"
              :label="item.name"
              :value="{name:item.name,id:item.id,select:'kitchenName'}"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="生产站:" :label-width="formLabelWidth" >
          <el-select
            v-model="warehouseFrom.productionName"
            size="small"
            style="width: 180px;"
            placeholder="请选择生产站"
            @change="changeNewPrice($event, 'productionName')"
            clearable
          >
            <el-option
              v-for="item in production"
              :key="item.id"
              size="small"
              :label="item.name"
              :value="{name:item.name,id:item.id,select:'productionName'}"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="中转仓:" :label-width="formLabelWidth" >
          <el-select
            v-model="warehouseFrom.transferName"
            size="small"
            style="width: 180px;"
            placeholder="请选择中转仓"
            @change="changeNewPrice($event, 'transferName')"
            clearable
          >
            <el-option
              v-for="item in transfer"
              :key="item.id"
              size="small"
              :label="item.name"
              :value="{name:item.name,id:item.id,select:'transferName'}"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="仓库地址:" :label-width="formLabelWidth" prop="address">
          <div style="position:relative;">
            <el-input
              id="getDetail"
              v-model.trim="warehouseFrom.address"
              clearable
              size="small"
              autocomplete="off"
              style="width: 180px;"
              @input.native="SearchAddress"
            ></el-input>
            <div class="adressDetailDiv" v-show="adressDetailDivshow">
              <ul v-if="addressFlag&&addressList&&addressList.length" class="adressDetail">
                <li
                  class="pd-10"
                  v-for="(addressitem,index) in addressList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  :key="index"
                  :data-name="addressitem.name"
                  :data-lng="addressitem.location.lng"
                  :data-lat="addressitem.location.lat"
                  @click="getlnglat($event)"
                  @mouseover="changeColor($event)"
                  @mouseout="loseColor($event)"
                >
                  <div class="fz-16 fw-bold">{{ addressitem.name }}</div>
                  <div class="c-999 lh-24">
                    地址：<span>{{ addressitem.address }}</span>
                  </div>
                  <div class="c-999 lh-24">
                    城市：<span>{{ addressitem.district }}</span>
                  </div>
                </li>
              </ul>
              <i class="close el-icon-error Delgoodlist" @click="headleclose" v-if="addressFlag&&addressList&&addressList.length"></i>
              <el-pagination
                v-if="addressFlag&&addressList&&addressList.length"
                background
                :current-page.sync="currentPage"
                layout="prev, pager, next"
                :page-sizes="[5, 10, 15, 20]"
                :page-size.sync="pagesize"
                :total="addressList.length"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                style="margin-top: 5px 0;"
              ></el-pagination>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="仓库经纬度:" :label-width="formLabelWidth">
          <el-input
            v-model="warehouseFrom.longitude"
            size="small"
            placeholder="经度"
            class="w-100"
          ></el-input>
          <el-input
            v-model="warehouseFrom.latitude"
            size="small"
            class="w-100 ml-10"
            placeholder="维度"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单提前时间:" :label-width="formLabelWidth">
          <el-input
            v-model="warehouseFrom.orderAdvanceTime"
            size="small"
            min="0"
            style="width: 180px;"
            type="number"
          ></el-input>分钟
        </el-form-item>
        <el-form-item label="开始配送时间:" :label-width="formLabelWidth" prop="deliveryStartTime">
          <el-time-select
            v-model="deliveryStartTime"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '24:00'
            }"
            placeholder="选择开始配送时间"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="结束配送时间:" :label-width="formLabelWidth" prop="deliveryEndTime">
          <el-time-select
            v-model="deliveryEndTime"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '24:00'
            }"
            placeholder="选择结束配送时间"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="销售组织ID:" :label-width="formLabelWidth" prop="salesOrganizationId">
          <el-input
            v-model.trim="warehouseFrom.salesOrganizationId"
            size="small"
            type="textarea"
            maxlength="64"
            show-word-limit
            autocomplete="off"
            style="width: 180px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="销售组织名称:" :label-width="formLabelWidth" prop="salesOrganizationName">
          <el-input
            v-model.trim="warehouseFrom.salesOrganizationName"
            size="small"
            autocomplete="off"
            style="width: 180px;"
            type="textarea"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="是否中转超时提醒:" :label-width="formLabelWidth" prop="transferPrompt">
          <el-switch v-model="warehouseFrom.transferPrompt" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <div class="bd-t">
          <productLabel ref="productLabel"></productLabel>
        </div>
        <div class="bd-t">
          <h4>蛋糕生产站信息</h4>
          <el-form-item label="地址:" :label-width="formLabelWidth" prop="pickAddress">
            <el-input
              v-model.trim="warehouseFrom.pickAddress"
              size="small"
              autocomplete="off"
              style="width: 180px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="经度:" :label-width="formLabelWidth" prop="pickLongitude">
            <el-input
              v-model.trim="warehouseFrom.pickLongitude"
              size="small"
              autocomplete="off"
              style="width: 180px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="纬度:" :label-width="formLabelWidth" prop="pickLatitude">
            <el-input
              v-model.trim="warehouseFrom.pickLatitude"
              size="small"
              autocomplete="off"
              style="width: 180px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人:" :label-width="formLabelWidth" prop="storeContact">
            <el-input
              v-model.trim="warehouseFrom.storeContact"
              size="small"
              autocomplete="off"
              style="width: 180px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" :label-width="formLabelWidth" prop="storeMobile">
            <el-input
              v-model.trim="warehouseFrom.storeMobile"
              size="small"
              autocomplete="off"
              style="width: 180px;"
            ></el-input>
          </el-form-item>
        </div>
        <div class="tipsbutton">
          <el-button
            type="primary"
            plain
            size="small"
            @click="Selectwarehouse"
            v-if="warehouseFrom.type !=3 && warehouseFrom.cityId"
          >添加仓库范围</el-button>
          <el-button
            type="success"
            size="small"
            @click="handlecommit('warehouseFrom',warehouseFrom)"
          >提交</el-button>
        </div>
      </el-form>
      
    </div>
    <div class="right">
      <div class="amap-page-container">
        <XmMap ref="xmMap" style="width: 100%;height: 700px; margin: 0;" :hasScreenBtn="true"></XmMap>
        <!-- 电子围栏 -->
        <el-row style="text-align: right;padding:10px" v-if="SelectwarehouseOther">
          <el-button
            type="danger"
            plain
            size="small"
            @click="removeFence"
            v-if="warehouseFrom.type !=3"
          >删除仓库地图</el-button>
          <el-button
            type="warning"
            plain
            size="small"
            @click="EditFence"
            v-if="warehouseFrom.type !=3"
          >编辑仓库地图</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getMainWarehouseList,
  selectDeptByCityId,
  deptdepts,
  warehouseSave,
  warehousetype,
  ProductionWarehouseByCity,
  getWarehouseByType,      // 3仓列表
} from "@/api/warehouse";
import productLabel from "./productLabel.vue";
import { inputTipThrottle } from '@/util/map'

export default {
  components: {
    productLabel,
  },
  data: function () {
    return {
      centralKitchen: [],    // 中央厨房
      transfer: [],     //中转仓
      production: [],   //生产厂
      warehouseFrom: {
        kitchenName: '', // 中央厨房
        productionName: '', //生产站
        transferName: '',  //中转仓
        cityId: "", //城市ID
        deptId: "", //区域ID
        name: "", //仓库名称
        address: "", //仓库编辑地址
        parentId: "", //默认0
        polygon: "", //仓库范围
        status: 1, //默认
        type: "", //默认
        longitude: "", //经度
        latitude: "", // 纬度
        deliveryStartTime: "", //配送开始时间
        deliveryEndTime: "", //配送结束时间
        orderAdvanceTime: "", //下单提前时间(分钟)
        salesOrganizationId: "", //销售组织ID
        salesOrganizationName: "", //销售组织名称
        isUp: 2,
        isAutoReceive: 0,
        closeStartTime: "",
        closeEndTime: "",
        pickAddress: "", //取货地址
        pickLatitude: "", //取货纬度
        pickLongitude: "", //取货经度
        storeContact: "", //店铺负责⼈
        storeMobile: "", //店铺负责⼈电话
        transferPrompt: "", //是否中转超时提醒
      },
      deliveryStartTime: "", //配送开始时间
      deliveryEndTime: "", //配送结束时间
      adressDetailDivshow: false,
      rules: {
        name: [
          {
            required: true,
            message: "仓库名称不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
            message: "仓库名称必须包含中英文",
            trigger: "blur",
          },
        ],
        cityId: [
          {
            required: true,
            message: "请选择城市",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择仓库类型",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择区域",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入仓库地址",
            trigger: "blur",
          },
        ],
        orderAdvanceTime: [
          {
            required: true,
            message: "请输入下单提前时间",
            trigger: "blur",
          },
          {
            type: "number",
            pattern: /[^\d]|^[0]/g,
            message: "下单提前时间只能输入数字",
            trigger: "blur",
            max: 6,
          },
        ],
      },
      formLabelWidth: "160px",
      cityList: [],
      areadataList: [],
      fenceForm: {
        coordinate: [],
      },
      mouseTool: null,
      addressFlag: false,
      addressList: [], // 地址详情列表
      pagesize: 5,
      currentPage: 1,
      newcenter: "",
      SelectwarehouseOther: false,
      warehousetypeList: [], //仓库类型
      marker: null,
    };
  },
  mounted() {
    this.citydataList()
  },
  methods: {
        // 获取当前上传的数据
    changeNewPrice(data, type){
      // 中央厨房  kitchenId 中转仓  transferId  生产站  productionId
      if(type == "productionName"){
        this.warehouseFrom.productionName = data ? data.name : ''
        this.warehouseFrom.productionId = data ? data.id : ''
      }else if(type == 'kitchenName'){
         this.warehouseFrom.kitchenName = data ? data.name : ''
         this.warehouseFrom.kitchenId = data ? data.id : ''
      }else if(type == 'transferName'){
         this.warehouseFrom.transferName = data ? data.name : ''
         this.warehouseFrom.transferId = data ? data.id : ''
      }
    },
    // 获取3仓列表
    getgetWarehouseByType(item){
      let obj = {}
      obj['cityId'] = item
      getWarehouseByType({...obj,'type':1}).then(res=>{
        this.centralKitchen = res.data.data
      })
      getWarehouseByType({...obj,'type':4}).then(res=>{
        this.production = res.data.data   // 中转仓
      })
      getWarehouseByType({...obj,'type':2}).then(res=>{
        this.transfer = res.data.data // 生产站
      })
    },

    headleclose() {
      this.adressDetailDivshow = false;
      this.warehouseFrom.address = "";
    },
    citydataList() {
      //获取城市列表数据
      deptdepts("").then((response) => {
        this.cityList = response.data.data;
      });
    },
    //仓库类型
    getwarehousetype() {
      warehousetype("").then((response) => {
        this.warehousetypeList = response.data.data;
      });
    },

    getcityIdslist(cityId) {
      this.getgetWarehouseByType(cityId)
      //获取城市列表ID
      this.warehouseFrom.kitchenName  = '';   //中央厨房
      this.warehouseFrom.productionName = '';  //生产站
      this.warehouseFrom.transferName = '';   // 中转站
      this.warehouseFrom.name = "";
      this.warehouseFrom.address = "";
      this.warehouseFrom.parentId = "";
      this.warehouseFrom.type = "";
      this.warehouseFrom.deptId = "";
      this.deliveryStartTime = "";
      this.deliveryEndTime = ""; //配送结束时间
      this.warehouseFrom.orderAdvanceTime = ""; //下单提前时间(分钟)
      this.warehouseFrom.salesOrganizationId = ""; //销售组织ID
      this.warehouseFrom.salesOrganizationName = ""; //销售组织名称
      this.fenceForm.coordinate = [];
      this.resetMap()
      if (this.mouseTool) {
        this.mouseTool.close(true);
      }
    },
    getwarehousetypeId(data) {
      console.log(this.warehouseFrom.type,'添加')
      this.warehouseFrom.type = data;
      this.warehouseFrom.deptId = "";
      this.warehouseFrom.parentId = "";
      if (data == "1") {
        // this.getArea(this.warehouseFrom);
      } else if (data == "3") {
        console.log("123");
        this.fenceForm.coordinate = [];
        if (this.mouseTool) {
          this.mouseTool.close(true);
        }
      }
    },
    getWarehouseIds(data) {
      this.parentId = data.id;
      selectDeptByCityId({
        cityId: this.warehouseFrom.cityId,
      }).then((res) => {
        this.areadataList = res.data.data;
        this.areadataList.forEach((item) => {
          if (data.value == item.id) {
            this.warehouseFrom.deptId = item.id;
          }
        });
      });
    },
    // 点击列表获取经纬度
    getlnglat(e) {
      this.clearMarker()
      this.addressFlag = false;
      let pois = e.currentTarget.dataset;
      this.warehouseFrom.latitude = pois.lat;
      this.warehouseFrom.longitude = pois.lng;
      this.warehouseFrom.address = pois.name;
      this.addMarker()
      // 绑定事件移动地图事件
      this.$refs.xmMap.setZoomAndCenter(13, [pois.lng, pois.lat]);
    },
    addMarker() {
      this.marker = this.$refs.xmMap.createMarker({
        longitude: this.warehouseFrom.longitude,
        latitude: this.warehouseFrom.latitude,
        label: {
          content: `<div class='info'>${this.warehouseFrom.address}</div>`
        },
      })
      this.$refs.xmMap.map.add(this.marker);
    },
    clearMarker() {
      if (this.marker) {
        this.$refs.xmMap.map.remove(this.marker)
        this.marker = null
      }
    },
    changeColor(e) {
      e.currentTarget.style.background = "#F5F7FA";
    },
    // 离开列表颜色改变
    loseColor(e) {
      e.currentTarget.style.background = "#fff";
    },
    getareadataList() {
      //区域下拉
      if (this.warehouseFrom.cityId == "") {
        this.$message({
          showClose: true,
          message: "请选择城市",
          type: "warning",
        });
      } else {
        selectDeptByCityId({
          cityId: this.warehouseFrom.cityId,
        }).then((res) => {
          this.areadataList = res.data.data;
        });
      }
    },

    handlecommit(warehouseFrom, item) {
      console.log(item, "item");
      this.$refs[warehouseFrom].validate((valid) => {
        if (valid) {
          const errorMsg = this.getValidateMsg()
          if (errorMsg) {
            this.$message({
              message: errorMsg,
              type: "warning",
            });
            return false
          }

          if (item.type == "3") {
            this.$confirm("选择自提仓, 是没有配送范围的,确定保存?", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.warehouseSave()
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
          } else {
            this.warehouseSave()
          }
        } else {
          this.$message({
            message: "信息未填完整",
            type: "warning",
          });
          return false;
        }
      });
    },
    warehouseSave() {
      const warehouse = this.getParams(this.warehouseFrom)

      warehouseSave(warehouse).then((res) => {
        this.$message({
          type: "success",
          message: "操作成功!",
        });

        window.location.reload();
      });
    },
    getValidateMsg() {
      if (this.warehouseFrom.orderAdvanceTime <= 0) {
        return '下单提前时间需要大于0'
      }
      if (this.warehouseFrom.orderAdvanceTime > 86400) {
        return '下单提前时间不可大于86400'
      }
      if (!this.deliveryStartTime) {
        return '配送开始时间不能为空'
      }
      if (!this.deliveryEndTime) {
        return '配送结束时间不能为空'
      }
      if (this.deliveryEndTime <= this.deliveryStartTime) {
        return '结束时间要大于开始时间'
      }
      if (
        (this.warehouseFrom.type == "2" && this.parentId == "") ||
        (this.warehouseFrom.type == "3" && this.parentId == "")
      ) {
        return '该仓库类型的生产总仓不能为空！'
      }
      
    },
    getParams(item) {
      const productLabelParams = this.$refs.productLabel.getParams()
      const params = {
        cityId: item.cityId, //城市ID
        deptId: item.deptId, //区域ID
        name: item.name, //仓库名称
        address: item.address, //仓库编辑地址
        // parentId: item.type == "1" ? 0 : this.parentId, //生产总仓id（只有选择类型为配送分仓和自提分仓传选中的生产总仓id,其它类型传0）
        parentId: 0,
        polygonBy:
          item.type == 3 ? "" : this.fenceForm.coordinate.join(";"), //仓库范围
        status: 1, //默认
        type: item.type, //类型：1:生产总仓；2:配送分仓 ; 3.自提分仓
        longitude: item.longitude, //经度
        latitude: item.latitude, // 纬度
        deliveryStartTime: this.deliveryStartTime + ":00", //配送开始时间
        deliveryEndTime: this.deliveryEndTime + ":00", //配送结束时间
        orderAdvanceTime: item.orderAdvanceTime, //下单提前时间(分钟)
        salesOrganizationId: item.salesOrganizationId,
        salesOrganizationName: item.salesOrganizationName,
        isUp: 2,
        isAutoReceive: 0,
        closeStartTime: item.closeStartTime,
        closeEndTime: item.closeEndTime,
        kitchenId: item.kitchenId || 0,   // 中央厨房
        transferId: item. transferId|| 0,  // 中转仓
        productionId: item.productionId || 0,  // 生产站
        pickAddress: item.pickAddress,
        pickLatitude: item.pickLatitude,
        pickLongitude: item.pickLongitude,
        storeContact: item.storeContact,
        storeMobile: item.storeMobile,
        transferPrompt: item.transferPrompt,
        ...productLabelParams
      };
      return params
    },
    SearchAddress() {
      if (this.warehouseFrom.cityId == "") {
        this.$message({
          showClose: true,
          message: "请选择城市",
          type: "warning",
        });
        this.warehouseFrom.address = "";
        return false;
      } else if (this.warehouseFrom.deptId == "") {
        this.$message({
          showClose: true,
          message: "请选择区域",
          type: "warning",
        });
        this.warehouseFrom.address = "";
        return false;
      } else {
        this.addressFlag = true;
        const cityName = this.getCityName()
        inputTipThrottle({
          city: cityName,
          keyword: this.warehouseFrom.address
        }).then(res => {
          this.addressList = res.sort((a, b) => {
            return a.district.includes(cityName) ? -1 : 0
          })
          if (this.addressList && this.addressList.length > 0) {
            this.adressDetailDivshow = true;
          } else {
            this.$message("搜索无结果请重新输入");
            this.adressDetailDivshow = false;
          }
        })
      }
    },
    getCityName() {
      const selected = this.cityList.find(item => item.id === this.warehouseFrom.cityId)
      return selected ? selected.deptName : ''
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },

    Selectwarehouse() {
      // 选择仓库范围添加自定义多边形
      this.SelectwarehouseOther = true;
      if (this.warehouseFrom.cityId == "") {
        this.$message({
          showClose: true,
          message: "请选择城市",
          type: "warning",
        });
        return false;
      } else if (this.warehouseFrom.deptId == "") {
        this.$message({
          showClose: true,
          message: "请选择区域",
          type: "warning",
        });
        return false;
      } else if (this.warehouseFrom.address == "") {
        this.$message({
          showClose: true,
          message: "请选择仓库地址",
          type: "warning",
        });
        return false;
      } else {
        this.resetMap()
        this.addMarker()
        if (this.mouseTool) {
          this.$refs.xmMap.openDrawPolygon()
        } else {
          this.$refs.xmMap.mouseToolPlugin().then(mouseTool => {
            this.mouseTool = mouseTool
            this.$refs.xmMap.openDrawPolygon()
            AMap.event.addListener(mouseTool, "draw", (e) => {
              let path = e.obj.getPath();
              path.forEach((e) => {
                this.fenceForm.coordinate = path.map(item => {
                  return [item.getLng(), item.getLat()]
                });
              });
            });
          })
        }
      }
    },
    removeFence() {
      this.fenceForm.coordinate = [];
      this.resetMap()
      this.addMarker()
      this.SelectwarehouseOther = false;
    },
    resetMap() {
      if (this.mouseTool) {
        this.mouseTool.close(true);
      }
      this.$refs.xmMap.clearMap()
    },
    EditFence() {
      this.resetMap()
      this.addMarker()

      //定义折线对象
      var polygon = new AMap.Polygon({
        path: this.fenceForm.coordinate.map(item => item),
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        zIndex: 50,
      });
      this.$refs.xmMap.map.add(polygon);
      // 缩放地图到合适的视野级别
      this.$refs.xmMap.map.setFitView([polygon]);

      //构造折线编辑对象，并开启折线的编辑状态
      this.$refs.xmMap.plugin(["AMap.PolyEditor"]).then(() => {
        var polyEditor = new AMap.PolyEditor(this.$refs.xmMap.map, polygon);
        polyEditor.on('adjust',(e) => {
          this.fenceForm.coordinate = e.target.getPath().map(item => {
            return [item.getLng(), item.getLat()]
          })
        })
        polyEditor.open();
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.warehouseadd {
  display: flex;
  justify-content: space-between;

  .left {
    .el-form-item {
      margin-bottom: 22px !important;
    }

    width: 35%;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #606266;
    transition: 0.3s;
    margin-bottom: 10px;
    position: relative;
    max-height: 660px;
    overflow: auto;

    .tipsbutton {
      text-align: right;
    }

    .adressDetailDiv {
      background: #fff;
      position: absolute;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      z-index: 99;
      box-sizing: border-box;
      width: 350px;

      .adressDetail {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #dcdfe6;
        margin-bottom: 5px;
        max-height: 240px;
        overflow: auto;

        li {
          border-bottom: 1px solid #dcdfe6;

          p {
            margin: 0;
            padding: 0 10px;
            list-style: none;
            width: 280px;
            text-align: left;
            line-height: 1.6;

            &:first-child {
              font-size: 17px;
            }

            &:last-child {
              color: #999;
            }
          }
        }
      }

      .close {
        position: absolute;
        right: 24px;
        top: 6px;
        font-size: 16px;
      }
    }
  }

  .right {
    width: 60%;

    .amap-demo {
      width: 100%;
      height: 700px;
    }
  }

  .bd-t {
    border-top: 1px solid #ddd;
  }
}
</style>
